<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Spine - Modelos</title>
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/spine.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <script type="text/javascript">
            // Como  definir un modelo y configurar la estructura de sus elementos
            var HotSpot = Spine.Model.sub();
            HotSpot.configure("HotSpot","posicion","color");
            
            // agregar metodos al modelo ( logia de negocio )
            HotSpot.extend({
                // this.select : retorna un subconjunto de elementos que devuelve true
                // en la funcion de comparacion
               getBlancos : function(){
                   return this.select(function(hotspot){
                       return (hotspot.color.r == 255 &&  hotspot.color.g == 255 &&  hotspot.color.b == 255)
                   });
               },
               getOscuros : function(){
                   return this.select(function(hotspot){
                       return (hotspot.color.r == 0 && hotspot.color.r == 0 && hotspot.color.r == 0);    
                   });
               }
            });
            
            // agregando metodos a cada elemento de la coleccion
            HotSpot.include({
                strColor : function(){
                    var cadena = [];
                    cadena.push("RGB(",this.color.r,",",this.color.g,",",this.color.b,")");
                    return cadena.join("");
                }
            });
            
            // crear nuevos elementos 
            var hotspot1 = new HotSpot({ posicion:{x:200,y:150} , color:{r:0,g:0,b:0} } );
            var hotspot2 = new HotSpot({ posicion:{x:10,y:17} , color:{r:8,g:3,b:7} } );
            var hotspot3 = new HotSpot({ posicion:{x:100,y:45} , color:{r:255,g:255,b:255} } );
            var hotspot4 = new HotSpot({ posicion:{x:3,y:4} , color:{r:255,g:255,b:255} } );
            
            // guardar los elementos en memoria (dentro del modelo)
            hotspot1.save();
            hotspot2.save();
            hotspot3.save();
            hotspot4.save();
            
            // llamando a metodos de cada elemento (instancia)
            console.info("RGB 1",hotspot1.strColor());
            console.info("RGB 2",hotspot2.strColor());
            console.info("RGB 3",hotspot3.strColor());
            console.info("RGB 4",hotspot4.strColor());
            
            console.info("elemento : hotspot1");
            console.dir(hotspot1);
            console.info("Collecion : Modelo HotSpot");
            console.dir(HotSpot);
            
            // llamando a metodos creados en el modelo
            var hotspot_oscuros = HotSpot.getOscuros();
            var hotspot_blancos = HotSpot.getBlancos();
            
            // como ingresar a la subcoleccion
            console.info("hotpost_blancos cantidad : ",hotspot_blancos.length);
            console.info("hotspot_blancos estructura");
            console.dir(hotspot_blancos);
            
            $.each(hotspot_blancos,function(i,hotspot){
                 console.info("RGB(%s,%s,%s)",hotspot.color.r,hotspot.color.g,hotspot.color.b);
                 
            });
            
            var firstHostSpot = HotSpot.first();
            console.info("firstHostSpot",firstHostSpot) // x:200 y:150
            var lastHostSpot = HotSpot.last();
            console.info("lastHostSpot",lastHostSpot); // x:3 y:4
        </script>

    </body>
</html>
